<template>
    <!-- 菜单 开始 -->
    <div class="tab_menus">
        <div class="cell" :class="menuActive == item.id ? 'cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuClick(item)">
            <span>{{ item.name }}</span>
        </div>
    </div>
    <!-- 菜单 end -->
</template>
<script>
export default {
    name: 'TabMenus',
    props: {
        list: {
            type: Array,
            default: function () {
                return []
            }
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            menuActive: 1,
            menus: []
        }
    },
    watch: {
        list: {
            handler: function (n) {
                this.menus = n
            },
            immediate: true
        },
        value: {
            handler: function (n) {
                this.menuActive = n
            },
            immediate: true
        }
    },
    methods: {
        // 菜单点击事件
        menuClick(row) {
            this.menuActive = row.id;
            this.$emit('input', row.id)
            this.$emit('change', row.id)
            //scrollIntoView
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>